<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./js/vue.js"></script>
  </head>
  <body>
    <!-- 
      Vue中有两种数据绑定方式
      1.单向绑定:数据只能从data流向页面
        用法:v-bind:  可以简写成 :
      2.双向绑定:数据不仅能从data流向页面，还能从页面流向data
        用法:v-model:value=""   简写v-modle=""
        注意:双向绑定只能用于表单类的元素，即可以输入值的表单，输入框，单选框，复选框.......
     -->
    <div id="root">
      单向数据绑定:<input type="text" :value="name" /> <br />
      双向绑定:<input type="text" v-model="name" /><br />
    </div>
    <script type="text/javascript">
      Vue.config.productionTip = false
      new Vue({
        el: '#root',
        data: {
          name: '尚硅谷',
        },
      })
    </script>
  </body>
</html>
